<template>
  <view class="main">
    <view class="page-content" >
      <view class="tabs">
        <u-tabs
          :list="nvaList"
          :scrollable="false"
          lineWidth="188rpx"
          lingHeight="1rpx"
          lineColor="#FF8F1F"
          :itemStyle="{
            height: '100rpx'
          }"
          :activeStyle="{
            color: '#FF8F1F',
            fontWeight: 500,
          }"
          :inactiveStyle="{
            color: '#333',
            fontSize: '28rpx',
          }"
          @click="handleTab"
        ></u-tabs>
      </view>
      <Empty v-if="queryResult.isQueryed && !queryResult.list.length" />
      <view class="order-body">
        <view class="order-item" v-for="(item,index) in queryResult.list" :key="index" @click="handelToDetail(item)">
          <view class="item-header">
            <view class="order-no">
              <text @click.stop="handleCopyOrderId(item.id)">
                <text>订单编号：</text>
                <text>{{ item.id}}</text>
                <text class="iconfont icon-copy"></text>
              </text>
            </view>
            <view class="order-status" 
              :class="{'status-doing': item.orderStatus === 1, 'status-done': item.orderStatus === 2}"
            >{{ orderStatus[item.orderStatus]}}</view>
          </view>
          <view class="order-products">
            <view class="order-product" v-for="(pItem, index) in item.items" :key="index">
              <up-lazy-load
                class="img"
                img-mode="aspectFill"
                :image="pItem.productImageUrl"></up-lazy-load>
              <view class="p-infos">
                <view class="p-name">{{pItem.productName}}</view>
                <view class="p-tags" v-if="item.orderType === 1">
                  <view class="tag-item tag-point"  v-if="item.rewardType === 1">参与积分</view>
                  <view class="tag-item tag-cashback" v-if="item.rewardType === 2">参与返现</view>
                </view>
                <view class="p-num">x {{pItem.productAmount}}</view>
              </view>
              <view class="p-price"><text v-if="item.orderType === 1">￥</text>{{pItem.productPrice}}</view>
            </view>
          </view>
          <view class="item-footer">
            <view class="footer-total">
              <text>共计</text>
              <text class="price" ><text v-if="item.orderType === 1">￥</text><text class="price-num">{{item.totalAmount}}</text> <text v-if="item.orderType === 2"> 积分</text></text>
            </view>
            <view class="footer-info">
              <view><text>查看详情</text><text class="iconfont icon-more"></text></view>
              <view>{{item.createTime}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <TabBar :type="props.type"></TabBar>
    <Login />
  </view>
</template>

<script setup>
import { reactive, ref, defineProps, onMounted, computed, watch} from 'vue'
import { useStore } from 'vuex'
import Notices from '../../components/notices/index.vue' ;
import Product from '@/components/product/Product.vue' ;
import { ORDER_STATUS, POINT_ORDER_STATUS } from '@/constants'
import { getOrderListApi } from '@/api/user'

const props = defineProps({
  type: Number,
  default: 1
})
const emits = defineEmits(['onMounted'])
const store = useStore()
const isLogin = computed(()=> {
  return store.state.user.isLogin
})
watch(
  () => isLogin.value,
  (v) => {
    v && init()
  },
);
const nvaList1 = ref([
  {
    name: '全部订单',
    value: ''
  },
  {
    name: '审核中',
    value: 1
  },
  {
    name: '已发货',
    value: 2
  },
  {
    name: '已取消',
    value: 0
  },
])
const pointNvaList = ref([
  {
    name: '全部订单',
    value: ''
  },
  {
    name: '待发货',
    value: 1
  },
  {
    name: '已发货',
    value: 2
  },
  {
    name: '已取消',
    value: 0
  },
])
const nvaList = computed(()=> {
  if(props.type === 1) {
    return nvaList1.value
  }
  return pointNvaList.value
})
const queryResult = reactive({
  isLast: false,
  isQueryed: false,
  list: []
})
const queryData = reactive({
  page: 1,
  size: 10,
  orderType: props.type,
  orderStatus: ''
})
const orderStatus = computed(()=> {
  if(props.type === 1) {
    return ORDER_STATUS
  }
  return POINT_ORDER_STATUS
})
onMounted(()=> {
  emits('mounted')
})

async function loadNextPage(){
  if(queryResult.isLast) {
    return
  }
  queryData.page += 1;
  getListData()
}
async function init() {
  queryData.page = 1;
  queryResult.isLast = false
  await getListData()
}
async function getListData(){
  if(queryResult.isLast) {
    return
  }
  uni.showLoading()
  const res = await getOrderListApi({...queryData}).finally(()=> {
    uni.hideLoading()
    setTimeout(()=>{
      queryResult.isQueryed = true
    })
  })
  if(queryData.page === 1) {
    queryResult.list = [...res.items]
  } else {
    queryResult.list.push(...res.items)
  }
  queryResult.isLast = queryResult.list.length === res.total
  
}
function handleTab(e) {
  console.log('e', e)
  queryData.orderStatus = e.value
  init()
}
function handelToDetail(data){
   uni.navigateTo({
    url: `/subpkgs/order/detail?orderId=${data.id}`
  })
}
function handleCopyOrderId(id){
  uni.setClipboardData({
    data: id + '',
    success: function () {
      uni.$u.toast('已复制')
    },
    fail: function (e) {
      console.error(e)
    }
  });
}
defineExpose({
  init: init,
  loadNextPage
})
</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: 20rpx;
  .tabs{
    height: 100rpx;
    background: #FFFFFF;
    border: 1rpx solid #EEEEEE;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
  }
  .order-item{
    padding: 32rpx;
    background: #FFFFFF;
    margin-top: 24rpx;
    .item-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 27rpx;
      .order-no{
        font-weight: 400;
        font-size: 28rpx;
        color: #7E849F;
        line-height: 36rpx;
        .iconfont{
          margin-left: 12rpx;
        }
      }
      .order-status{
        font-weight: 400;
        font-size: 28rpx;
        line-height: 36rpx;
        &.status-doing{
          color: #FF8F1F;
        }
        &.status-done{
          color: #00B578
        }
      }
    }
    .order-products{
      .order-product{
        display: flex;
        margin-bottom: 24rpx;
        .img{
          width: 120rpx;
          height: 120rpx;
          overflow: hidden;
          border-radius: 8rpx;
        }
        .p-infos{
          flex: 1;
          padding: 0 24rpx;
        }
        .p-price{
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
          line-height: 36rpx;
          text{
            font-size: 24rpx
          }
        }
        .p-name{
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          line-height: 36rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 10rpx;
        }
        .p-tags{
          display: flex;
          margin-bottom: 14rpx;
          column-gap: 16rpx;
          .tag-item{
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 8rpx;
            border-radius: 5rpx;
            color: #fff;
            font-size: 18rpx;
          }
          .tag-point{
            background: #FFC300;
          }
          .tag-cashback{
            background: #3662EC;
          }
        }
        .p-num{
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          line-height: 36rpx;
        }
      }
    }
    .item-footer{
      .footer-total{
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 56rpx;
        text-align: right;
        .price{
          font-weight: 400;
          font-size: 24rpx;
          color: #FA5151;
          .price-num{
            font-size: 48rpx;
          }
        }
      }
      .footer-info{
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        line-height: 36rpx;
        align-items: center;
        .iconfont{
          margin-left: 4rpx;
          line-height: 36rpx;
        }
      }
    }
    &.order-cancel{
      .order-status{
        color: #999;
      }
    }
  }
}
</style>
